<template>
	<div class="log-wrapper">
        <Card>
            <!--搜索条件-->
            <div style="padding:0 20px">
            <Select v-model="typeCode" style="width:40%" placeholder="操作类型" clearable @on-change="getOperateData(1)">
                <Option
                v-for="item in eventsOptions"
                :value="item.code"
                :key="item.code">{{ item.name }}</Option>
            </Select>

            <DatePicker
            :transfer="true"
            type="daterange"
            placeholder="选择时间段"
            @on-open-change="handleOpenChange"
            style="width: 40%;margin-right:10px"
            v-model="timeRange"></DatePicker>

            <Button type="primary" icon="ios-search" @click="getOperateData(1)">搜索</Button>	
            </div>		
            <!--搜索条件end-->			
            <br>
            <br>

            <!--日志数据-->
            <Table stripe :loading="isLoadig" :columns="columns" :data="datas"></Table>
            <!--日志数据end-->


            <!--分页-->
            <Page :total="total"
            :page-size="size"
            :current.sync="currentPage"
            show-elevator
            @on-change="getOperateData"
            show-total style="text-align:center"></Page>
            <!--分页end-->
        </Card>
	</div>
</template>

<script>
// import util from '@/libs/util';
import { http, api } from '@/libs/http'
import { startOfDay, endOfDay, now, quarterAgo } from '@/libs/date'

export default {
  props: {
    operateType: {
      required: true
    },
    room: {
      required: true
    }
  },
  data () {
    return {
      isLoadig: true,
      size: 20,
      total: 0,
      currentPage: 1,
      columns: [
        // 日志表头
        {
          title: '说明',
          align: 'left',
          render: (h, p) => {
            return h('span', p.row.operation_type.name || '-')
          }
        },
        {
          title: '结果',
          align: 'left',
          render: (h, p) => {
            return h('span', p.row.target.value || '-')
          }
        },
        {
          title: '范围',
          align: 'left',
          render: (h, p) => {
            return h('span', p.row.target.name || '-')
          }
        },
        {
          title: '时间',
          align: 'center',
          width: 140,
          render (h, p) {
            return h(
              'span', // 标签名称
              new Date(p.row.time).Format('yyyy-MM-dd HH:mm')
            )
          }
        },
        {
          title: '操作者',
          align: 'center',
          width: 120,
          render: (h, p) => {
            return h('span', p.row.user_name || '-')
          }
        },
        {
          title: '状态',
          align: 'center',
          width: 100,
          render: (h, { row }) => {
            if (row.operation_type.name.includes('绑定')) return null
            return <span>{row.res_state === 1 ? '成功' : '失败'}</span>
          }
        }
      ],
      datas: [
        // 日志具体数据
      ],
      typeCode: 0,
      timeRange: [quarterAgo, now],
      operateEvents: []
    }
  },
  mounted () {
    //  const threeMonthAgo = dayjs().subtract(3, 'month')
    //  this.timeRange = [threeMonthAgo.startOf('month').toDate(), threeMonthAgo.endOf('month').toDate()]
    this.getOperateTypes()
    this.getOperateData(1)
  },
  methods: {
    getOperateTypes () {
      /**
             *  'system', 'user', 'role', 'permission', 'ability',
                'apartment', 'client', 'branch', 'home', 'room',
                'device', 'gateway', 'lock', 'elecollector', 'elemeter', 'water_gateway', 'watermeter',

             */
      if (!this.operateType) {
        return
      }
      let params = {
        type: this.operateType,
        list_type: 'all'
      }

      http.request(this, api.operations_types, null, params, res => {
        if (res) {
          this.operateEvents = this.operateEvents.concat(res.rows)
        }
      })
    },
    getOperateData (page) {
      // 获取操作记录数据
      if (page === 1) this.currentPage = 1
      let params = {
        device_id: this.room.id,
        type: this.operateType,
        list_type: 'page',
        limit: this.size,
        offset: this.size * (page - 1),
        start_time: this.timeRange[0] ? startOfDay(this.timeRange[0]) : null,
        end_time: this.timeRange[1] ? endOfDay(this.timeRange[1]) : null
      }
      if (this.typeCode) {
        params.type_code = this.typeCode
      }
      this.isLoadig = true
      http.request(this, api.operations, null, params, res => {
        if (res) {
          this.datas = res.rows
          this.total = res.count || 0
        }
        this.isLoadig = false
      })
    },
    handleOpenChange (value) {
      if (!value) {
        this.$nextTick(() => {
          this.getOperateData(1)
        })
      }
    }
  },
  computed: {
    refresh () {
      return this.$store.state.room.refresh
    },
    eventsOptions () {
      return this.operateEvents.filter(type => {
        return !/^bind/.test(String(type.code)) && !['room_bind_lock', 'charge_elemeter'].includes(type.code)
      })
    }
  },
  watch: {
    refresh () {
      this.getOperateTypes()
    }
  }
}
</script>

<style lang="less">
</style>